!!!
%html{:lang => 'en'}
  %head
    %title
      KCoin
    %meta{:charset => 'utf-8'}
    %meta{:name => 'viewport', :content=>'width=device-width, initial-scale=1.0, maximum-scale=1.0 user-scalable=no shrink-to-fit=no'}

    = include_stylesheet 'metro-4.2.48/metro-all.min'
    = content :stylesheets
    = include_stylesheet 'kcoin'

    = include_javascript 'https://code.jquery.com/jquery-3.3.1.min.js'
    = include_javascript 'metro-4.2.48/metro.min'

  %body
    .container-fluid.kcoin-background.d-flex.flex-align-center
      -#.text-center.login-title= link_to('<span class="kcoin-title">K</span>coin', '/')
      .text-center.login-title.d-none-lg.d-block-fs
        %img{:src=>"icons/kcoin-log-big.png"}

      %img.d-none-fs.d-block-lg.login-index-log{:src=>"icons/login-index.png"}
      .form.login-form
        .text-center.login-sub-title
          = t('login_title')
        .grid
          .row
            .cell
              %form.login-context{:action=>"/auth/login", :method=>'post',"data-role"=>'validator'}
                .form-group
                  %label
                    = t('login_login')
                  %input{:type => 'text',
                         :name => 'email',
                         :value => '',
                         maxlength: 120,
                         autofocus: "autofocus",
                         "data-validate" => "required"}
                .form-group
                  %label
                    =t('login_password')
                  .link= link_to("#{ t('login_forget_password') }", '/user/password_reset')
                  %input.border-radius-5.border{:type => 'password',
                         :name => 'password',
                         :value => '',
                         maxlength: 10,
                         "data-role" => "input",
                         "data-clear-button" => "false",
                         "data-validate" => "required pattern=^\\w{6,10}$ custom=validateEmailAndPwd"}
                  %span.invalid_feedback
                    =t('login_invalid_login_info')
                .form-group
                  %input.button.info.kcoin-button-flex{:type=>'submit',:value=> "#{ t('login_submit') }"}
                  .link= link_to("#{ t('login_signup')}", '/auth/join')
          .row
            .cell
              %a.login-context#auth_login.button.dark.kcoin-button-flex.mt-3{:href => '/auth/github/login'}
                %img.github-icon{:src=>"icons/github-icon.png"}
                  =t('login_signin_github')


    = include_javascript 'join'
    = include_javascript 'login'
